<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="cdnload" content="vue" />
    <meta name="author" content="lijinbo" />
    <title>Document</title>
    <style>
      @media only screen and (max-width: 767px) {
        .hidden-xs-only {
          display: none !important;
        }
      }
      @media only screen and (min-width: 768px) {
        .hidden-sm-and-up {
          display: none !important;
        }
      }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .hidden-sm-only {
          display: none !important;
        }
      }
      @media only screen and (max-width: 991px) {
        .hidden-sm-and-down {
          display: none !important;
        }
      }
      @media only screen and (min-width: 992px) {
        .hidden-md-and-up {
          display: none !important;
        }
      }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .hidden-md-only {
          display: none !important;
        }
      }
      @media only screen and (max-width: 1199px) {
        .hidden-md-and-down {
          display: none !important;
        }
      }
      @media only screen and (min-width: 1200px) {
        .hidden-lg-and-up {
          display: none !important;
        }
      }
      @media only screen and (min-width: 1200px) and (max-width: 1919px) {
        .hidden-lg-only {
          display: none !important;
        }
      }
      @media only screen and (max-width: 1919px) {
        .hidden-lg-and-down {
          display: none !important;
        }
      }
      @media only screen and (min-width: 1920px) {
        .hidden-xl-only {
          display: none !important;
        }
      }
    </style>
  </head>
  <body>
    <p>
      文章参考：
      <a href="https://element.eleme.cn/#/zh-CN/component/layout#xiang-ying-shi-bu-ju" target="_blank">
        element-ui 响应式布局
      </a>
    </p>
    <ul>
      <li>xs 手机</li>
      <li>sm 平板</li>
      <li>md 老式显示器（1200px）</li>
      <li>lg 笔记本</li>
      <li>xl 大屏显示器</li>
    </ul>
    <p>调整视口大小可以看到下面表格的变化</p>
    <div id="app">
      <table border="1">
        <tr>
          <th>class</th>
          <th>介绍</th>
          <th>响应式隐藏</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.className }}</td>
          <td>{{ item.title }}</td>
          <td>
            <span :class="item.className">{{ index }} - {{ item.className }}</span>
          </td>
        </tr>
      </table>
    </div>
    <script>
      const list = [
        { className: 'hidden-xs-only', title: '当视口在 xs 尺寸时隐藏' },
        { className: 'hidden-sm-only', title: '当视口在 sm 尺寸时隐藏' },
        { className: 'hidden-sm-and-down', title: '当视口在 sm 及以下尺寸时隐藏' },
        { className: 'hidden-sm-and-up', title: '当视口在 sm 及以上尺寸时隐藏' },
        { className: 'hidden-md-only', title: '当视口在 md 尺寸时隐藏' },
        { className: 'hidden-md-and-down', title: '当视口在 md 及以下尺寸时隐藏' },
        { className: 'hidden-md-and-up', title: '当视口在 md 及以上尺寸时隐藏' },
        { className: 'hidden-lg-only', title: '当视口在 lg 尺寸时隐藏' },
        { className: 'hidden-lg-and-down', title: '当视口在 lg 及以下尺寸时隐藏' },
        { className: 'hidden-lg-and-up', title: '当视口在 lg 及以上尺寸时隐藏' },
        { className: 'hidden-xl-only', title: '当视口在 xl 尺寸时隐藏' }
      ]
      new Vue({
        el: '#app',
        data() {
          return {
            list
          }
        }
      })
    </script>
  </body>
</html>
